<h1>普通树</h1>
<input type="text" id="inp"> <a id="a_btn">搜索</a>
<input type="text" id="in"> <a id="cancel_btn">搜索</a>
<ul id="tree_1" class="ztree"></ul>
<h1>节点id 父节点id 节点名称 属性自定义</h1>
<ul id="tree_2" class="ztree"></ul>
<h1>可选中树</h1>
<ul id="tree_3" class="ztree"></ul>
<a href="" class="a-btn" id="btn_3">获取选中节点</a>
<h1>可编辑树</h1>
<ul id="tree_4" class="ztree"></ul>

<script>

$(document).ready(function (){
require(['tree'] ,function (tree){

//-----------------------------普通树--------------------------------------------------
// 数据里需要传  id  parentID  label 三个属性
// zTreeOnClick 节点点击时的回调函数
var el_data_1 = [
					{id:"-1",parentID:"roota",label:"全部"},
					{id:"a",parentID:"-1",label:"a节点",chkDisabled:true},
					{id:"a-1",parentID:"a",label:"a-1节点"},
					{id:"a-2",parentID:"a",label:"a-2节点"},
					{id:"b",parentID:"-1",label:"b节点"},
					{id:"b-1",parentID:"b",label:"b-1节点"},
					{id:"b-2",parentID:"b",label:"b-c节点"}
				]
tree.render($("#tree_1") ,{
	zNodes : el_data_1,
	expandNode : "-1",
	chk : true,
	zTreeOnClick : function (event, treeId, treeNode){
	}
})

$("#a_btn").click(function (){
	tree_query($("#inp").val())
})
$("#cancel_btn").click(function (){
	tree.cancelCheck($("#tree_1"),["a-1"])
})
var el_new_data = []

function tree_query(queryStr){
	el_new_data = []

	var el_tree = $("#tree_1").data("tree")
	var nodes = el_tree.transformToArray(el_tree.getNodes());

	el_tree.showNodes(nodes)

	var nodeList = _.filter(nodes ,function (obj){
		return obj.label.indexOf(queryStr) != -1
	})

	for (var i = 0; i < nodeList.length; i++) {
		el_new_data.push(nodeList[i])
		findP(nodeList[i])
	}

	el_new_data = _.uniq(el_new_data)

	var el_data_tmp = []
	// 找到未选中的
	for (var i = 0; i < nodes.length; i++) {
		var tmp = _.find(el_new_data ,function (obj){
			return obj.id == nodes[i].id
		})
		if (!tmp)
			el_data_tmp.push(nodes[i])
	}

	el_tree.hideNodes(el_data_tmp)

	// tree.render($("#tree_1") ,{
	// 	zNodes : el_new_data,
	// 	expandNode : "-1",
	// 	chk : true,
	// 	zTreeOnClick : function (event, treeId, treeNode){
	// 	}
	// })
}

function findP(node){
	if (node.parentID == "roota")
		return false
	for (var i = 0; i < el_data_1.length; i++) {
		if (node.parentID == el_data_1[i].id){
			el_new_data.push(el_data_1[i])
			findP(el_data_1[i])
		}
	}
}

// _.uniq(el_new_data ,function (){

// })

var el_data_2 = [
					{id1:"a",pId1:"-1",label1:"a节点"},
					{id1:"a-1",pId1:"a",label1:"a-1节点"},
					{id1:"a-2",pId1:"a",label1:"a-2节点"}
				]

//-----------------------------------------------------------------------------------
// id  父节点id label  可以自定义属性名，作为参数传入 tree中
// 不传时，默认用 id  parentID  label 这三个属性
tree.render($("#tree_2") ,{
	zNodes : el_data_2,
	expandNode : "a",
	id : "id1",
	pId : "pId1",
	label : "label1"
})

//------------------------------------可选中树-----------------------------------------------
tree.render($("#tree_3") ,{
	zNodes : el_data_2,
	expandNode : "a",
	id : "id1",
	pId : "pId1",
	label : "label1",
	chk : true
})

$("#btn_3").click(function (){
	var nodes = tree.getCheckedNodes($("#tree_3"))
	console.log(nodes)
	return false
})

//----------------------------------可编辑树-------------------------------------------------
tree.render($("#tree_4") ,{
	zNodes : el_data_1,
	expandNode : "-1",
	showRemoveBtn : true,
	edit : true,
	chk : true,
	zTreeOnClick : function (event, treeId, treeNode){
	},
	beforeRemove : function (treeId, treeNode){
		$("#tree_4").data("tree").removeNode(treeNode);
	},
})

})
})

</script>